<style>
    body{
        background: #f3f3f3;
    }
    .MsgList{
        padding-bottom:4rem; 
    }
    .MsgList li{
        padding: .5rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

    }
    .MsgList li .MSGImg{
        padding: .5rem;
        border-radius: 50%;
        background: #FA9C18;
        width: 1.5rem;
        height: 1.5rem;
        text-align: center;
    }
    .MsgList .MSGImg img{
        width: 100%;
        height: 100%;
    }
    .MsgBox{
        text-align: center;
        width: 83%;
    }
    .MsgBox .cnt{
        width: 85%;
        background: white;
        padding: .5rem;
        border-radius: .3rem;
        color: #666;
        text-align: left;
        font-size: 85%;
        letter-spacing: .2rem;
    }
    .MsgBox .time{
        display: flex;
        justify-content: center;
        padding: .5rem;
        width:80%;

    }
    .MsgBox .time div{
        font-size: 80%;
        width: 70%;
        background: #ccc;
        color: white;
        padding: .3rem;
        border-radius: 1rem;
    }
@media screen and (min-width: 320px) and (max-width: 360px) {
    .MsgList li .MSGImg{
        padding: .5rem;
        border-radius: 50%;
        background: #FA9C18;
        width: 1rem;
        height: 1rem;
        text-align: center;
    }
}
@media screen and (min-width: 360px) and (max-width: 413px) { 

}
@media screen and (min-width: 414px) {

}
</style>
<ul class="MsgList">
  

    <li ng-repeat="MsgList in MsgList">
        <div class="MSGImg">
            <img src="../gy/images/icon/speaker horn.png" alt="">
        </div>
        <div class="MsgBox">
            <div class="cnt">
                {{MsgList.content}}
            </div>
            <div class="time">
                <div>
                        {{MsgList.create_time+'000' | date:'yyyy-MM-dd'}}
                </div>
            </div>
        </div>
    </li>
</ul>